<template>
	<view class="content">
		<!-- 收货地址列表 -->
		<view class="addr-list">
			<u-swipe-action
					class="addr-swipe"
					:show="item.show"
					v-for="(item, index) in tabList[active].list" :key="item.id"
					@click="onSwipeClick(item)"
					@open="onSwipeOpen(index)"
					:options="swipeOptions"
			>
				<view class="addr-item u-border-bottom" @tap="selectAddr(item)">
					<view class="left">
						<view class="top">
							<text class="name">{{ item.name }}</text>
							<text class="phone">{{ item.phone }}</text>
						</view>
						<view class="area"><text class="default" v-if="item.isDefault === 1">默认</text>{{ item.areaName + item.address }}</view>
					</view>
					<view class="right" @tap.stop="editAddr(item)">编辑</view>
				</view>
			</u-swipe-action>
		</view>

		<!-- 加载状态 -->
		<view class="load-status">
			<load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
					   :contentText="contentText"></load-more>
			<load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
			<empty v-if="tabList[active].empty" emptyType="address" emptyText="您还没添加地址~"></empty>
		</view>

		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" top="10"></u-back-top>

		<!--底部按钮组-->
		<view class="footer-bar">
			<button class="btn add" @tap="addAddr()">添加新地址</button>
		</view>
	</view>
</template>

<script>
	import Empty from "@/components/Empty";
	import Skeleton from '@/components/uni/Skeleton';
	import LoadMore from "@/components/uni/LoadMore";
	import loader from '@/utils/mixin/loader';
	export default {
		name: 'addr',
		mixins: [loader],
		components: {
			Empty,
			Skeleton,
			LoadMore,
		},
		data() {
			return {
				options: {},
				swipeOptions: [
					{
						text: '删除',
						style: {
							backgroundColor: '#FF3155'
						}
					}
				]
			}
		},
		onLoad(options) {
			this.options = options;
		},
		onShow() {
			this.initPage();
			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_shouhuodz');
			// #endif
		},
		methods: {
			// 初始化页面&刷新页面
			initPage() {
				this.onRefresh(this.tabList[this.active]);
			},
			// 加载前参数处理
			beforeLoader() {
				this.service = this.$service.order.address.page(this.params);
				return true;
			},
			// 加载后操作
			afterLoader() {
				this.tabList[this.active].list.forEach(item => {
					item.show = false;
				});
				
				if (this.tabList[this.active].list.length === 1) {
					this.tabList[this.active].list[0].isDefault = 1;
				}
			},
			// 删除地址
			onSwipeClick(item) {
				this.$service.order.address.delete({
					ids: item.id
				}).then(res => {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					
					this.onRefresh(this.tabList[this.active]);
				})
			},
			// 滑动关闭其他行
			onSwipeOpen(index) {
				this.tabList[this.active].list[index].show = true;
				this.tabList[this.active].list.map((val, idx) => {
					if(index != idx) this.tabList[this.active].list[idx].show = false;
				});
				this.$forceUpdate();
			},
			// 选中地址
			selectAddr(item) {
				if (!this.options.source) {
					uni.setStorageSync('addressInfo', item);
					uni.navigateBack({
					    delta: 1
					});
				}
			},
			// 编辑收货地址
			editAddr(item) {
				uni.navigateTo({
					url: '/pages/member/addressDetail?id=' + item.id + '&isDefault=' + item.isDefault
				})
			},
			// 添加收货地址
			addAddr() {
				uni.navigateTo({
					url: '/pages/member/addressDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 0;
		padding-bottom: 120rpx;
		.addr-list {
			width: 100%;
			/deep/.addr-swipe {
				background: #fff;
				width: 100%;
				.addr-item {
					width: 100%;
					padding: 28rpx 44rpx;
					@include flexBox(space-between, center);
					.left {
						flex: 1;
						overflow: auto;
						.top {
							@include flexBox(flex-start, flex-end);
							.name {
								color: #000;
								font-size: 28rpx;
							}
							.phone {
								color: #9A9A9A;
								font-size: 24rpx;
								margin-left: 20rpx;
							}
						}
						.area {
							margin-top: 4rpx;
							.default {
								color: $main-color-text;
								background: #FDF0E8;
								padding: 2rpx 6rpx;
								font-size: 24rpx;
								margin-right: 10rpx;
							}
						}
					}
					.right {
						line-height: 60rpx;
						padding-left: 34rpx;
						border-left: 2rpx solid #EBEBEB;
						font-size: 24rpx;
						color: #9A9A9A;
					}
				}
			}
		}
		.footer-bar {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			background: #fff;
			padding: 10rpx 24rpx;
			@include flexBox(center);
			.btn {
				width: 100%;
				border-radius: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				&::after {
					border: none;
				}
				&.add {
					background: $main-color;
					color: #333333;
				}
			}
		}
	}
</style>
